<template>
  <section class="drag-tree-container scrollbar" :style="{ width: width }">
    <el-tree
      v-if="show"
      v-loading="loading"
      :data="data"
      :props="defaultProps"
      :node-key="nodeKey"
      icon-class="el-icon-remove-outline"
      default-expand-all
      highlight-current
      :expand-on-click-node="false"
      :indent="40"
      @node-click="handleClick"
      @node-drag-start="handleDragStart"
      @node-drag-enter="handleDragEnter"
      @node-drag-leave="handleDragLeave"
      @node-drag-over="handleDragOver"
      @node-drag-end="handleDragEnd"
      @node-drop="handleDrop"
      v-on="$listeners"
      :draggable="draggable"
      :allow-drop="allowDrop"
      :allow-drag="allowDrag"
      :default-checked-keys="[currentNodeKey]"
      :current-node-key="currentNodeKey"
    >
      <span
        class="custom-tree-node"
        :class="{
          'is-disabled': data.disabled,
          'is-top': node.level === 1,
        }"
        slot-scope="{ node, data }"
      >
        <span
          :class="{
            'jee-color':
              node.isCurrent || (node.level && node.level === 1 && showLevel),
          }"
          >{{ data[defaultProps.label || "label"] }}</span
        >
        <i
          class="el-icon-remove-outline jee-color"
          v-if="node.expanded && node.childNodes.length"
          @click="() => handleCollect(node)"
        ></i>
        <i
          class="el-icon-circle-plus-outline jee-color"
          v-if="!node.expanded && node.childNodes.length"
          @click="() => handleExpand(node)"
        ></i>
        <div class="sort-wrap"></div>
      </span>
    </el-tree>
  </section>
</template>

<script>
// node: {
//   parent,
//   isLeaf,
//   level,
//   expanded,
//   isCurrent,
//   data,
//   childNodes
// }
export default {
  props: {
    width: {
      type: String,
      default: "",
    },
    loading: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
    draggable: {
      type: Boolean,
      default: false,
    },
    defaultProps: {
      type: Object,
      default: () => ({
        children: "children",
        label: "label",
      }),
    },
    nodeKey: {
      type: String,
      default: "id",
    },
    currentNodeKey: {
      type: [Number, String],
    },
    showLevel: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {
    handleClick(item, node, ev) {
      // console.log('click', item, node, ev)
      this.$emit("handleClick", item, node, ev);
    },
    handleExpand(node) {
      console.log(node);
      node.expanded = true;
    },
    handleCollect(node) {
      console.log(node);
      node.expanded = false;
    },

    handleDragStart(node, ev) {
      console.log("drag start", node);
    },
    handleDragEnter(draggingNode, dropNode, ev) {
      // console.log('tree drag enter: ', dropNode.label)
    },
    handleDragLeave(draggingNode, dropNode, ev) {
      // console.log('tree drag leave: ', dropNode.label)
    },
    handleDragOver(draggingNode, dropNode, ev) {
      // console.log('tree drag over: ', dropNode.label)
    },
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      // console.log('tree drag end: ', dropNode && dropNode.label, dropType)
    },
    handleDrop(draggingNode, dropNode, dropType, ev) {
      // this.show = false
      // setTimeout(() => {
      //   this.show = true
      // }, 0)
      console.log("tree drop: ", draggingNode.label, dropNode.label, dropType);
      this.$emit("handleDrop", draggingNode, dropNode, dropType);
      // dropType: before after inner
    },
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.label === "二级 3-1") {
        return type !== "inner";
      } else {
        return true;
      }
    },
    allowDrag(draggingNode) {
      return draggingNode.data.label.indexOf("三级 3-2-2") === -1;
    },
    handleSort(data, type) {
      this.$emit("handleSort", data, type);
    },
  },
};
</script>

<style lang="scss">
// https://github.com/ElemeFE/element/issues/4944 横向滚动
.drag-tree-container {
  height: 100%;
  overflow: overlay;
  .el-tree {
    // 支持横向滚动条
    min-width: 100%;
    // display: inline-block;
    .el-tree-node {
      .el-tree-node__content {
        height: 45px;
        .el-tree-node__expand-icon {
          display: none;
        }
        .custom-tree-node {
          white-space: nowrap;
          position: relative;
          padding-left: 12px;
          line-height: 45px;
          width: 100%;
          span.jee-color {
            font-size: 16px;
            font-weight: 600;
          }
          i {
            position: absolute;
            left: 25px;
            bottom: 0;
            font-size: 11px;
          }
          &:not(.is-top) {
            &::after {
              content: " ";
              position: absolute;
              top: 22px;
              left: -10px;
              width: 12px;
              border: none;
              border-top: 1px solid #cbcbcb;
            }
          }
          .sort-wrap {
            position: absolute;
            right: 10px;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            padding: 8px 0;
            box-sizing: border-box;
            .jee-svg-icon {
              font-size: 12px;
              fill: #999999;
              opacity: 0;
            }
          }
        }
        &:hover {
          .custom-tree-node .sort-wrap .jee-svg-icon {
            opacity: 1;
          }
        }
      }
    }
  }
  .el-tree .el-tree-node__children > .el-tree-node:not(:last-child) {
    position: relative;
    & > .el-tree-node__content > .custom-tree-node:before {
      content: " ";
      position: absolute;
      top: 0;
      left: -10px;
      height: 100%;
      border: none;
      border-left: 1px solid #cbcbcb;
    }
    > .el-tree-node__children {
      position: relative;
      &::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 30px;
        height: 100%;
        border: none;
        border-left: 1px solid #cbcbcb;
        z-index: 1;
      }
    }
  }
  .el-tree .el-tree-node__children > .el-tree-node:last-child {
    // >.el-tree-node__content>.custom-tree-node
    position: relative;
    & > .el-tree-node__content > .custom-tree-node:before {
      content: " ";
      position: absolute;
      top: 0;
      left: -10px;
      height: 22px;
      border: none;
      border-left: 1px solid #cbcbcb;
    }
  }
  .el-tree
    > .el-tree-node
    > .el-tree-node__children
    > .el-tree-node:not(:last-child) {
    > .el-tree-node__children {
      &::before {
        left: 30px;
      }
      > .el-tree-node > .el-tree-node__children {
        &::before {
          left: 70px;
        }
        > .el-tree-node > .el-tree-node__children {
          &::before {
            left: 110px;
          }
          > .el-tree-node > .el-tree-node__children {
            &::before {
              left: 150px;
            }
            > .el-tree-node > .el-tree-node__children {
              &::before {
                left: 190px;
              }
              > .el-tree-node > .el-tree-node__children {
                &::before {
                  left: 230px;
                }
                > .el-tree-node > .el-tree-node__children {
                  &::before {
                    left: 270px;
                  }
                  > .el-tree-node > .el-tree-node__children {
                    &::before {
                      left: 310px;
                    }
                    > .el-tree-node > .el-tree-node__children {
                      &::before {
                        left: 350px;
                      }
                      > .el-tree-node > .el-tree-node__children {
                        &::before {
                          left: 390px;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
